<template>
    <!-- 顶部导航 -->
    <div class="bg-white shadow-sm">
        <div class="container mx-auto flex items-center justify-between h-12 px-6">
            <div class="text-2xl font-bold text-red-600">亿购网</div>
            <div class="flex items-center space-x-6">
                <a href="/homePage" class="text-gray-600 hover:text-gray-900">新余女鞋</a>
                <a href="#" class="text-gray-600 hover:text-gray-900">投商家</a>
                <a href="#" class="text-gray-600 hover:text-gray-900">找代发</a>
                <a href="#" class="text-gray-600 hover:text-gray-900">找摄影</a>
                <a href="#" class="text-gray-600 hover:text-gray-900">箱包</a>
                <a href="#" class="text-gray-600 hover:text-gray-900">男鞋</a>
                <a href="#" class="text-gray-600 hover:text-gray-900">童鞋童装</a>
                <a href="#" class="text-gray-600 hover:text-gray-900">女装</a>
                <a href="#" class="text-gray-600 hover:text-gray-900">泳装</a>
                <a href="#" class="text-gray-600 hover:text-gray-900">招工</a>
                <a href="#" class="text-gray-600 hover:text-gray-900">商标库</a>
                <a href="#" class="text-gray-600 hover:text-gray-900">知识产权保护</a>
            </div>
            <div class="flex items-center space-x-4" v-if="!userStore.isLogin">
                <a href="/login" class="text-yellow-600 rounded-sm px-1 border bg-white">登录</a>
                <a href="/register/step1" class="text-yellow-600 hover:text-yellow-900 bg-white">注册</a>
            </div>
            <div class="flex items-center space-x-4" v-if="userStore.isLogin">
                <span class="text-yellow-600 rounded-sm px-1 border bg-white">{{userStore.account}}</span>
                <div class="relative">
                    <span class="text-yellow-600 hover:text-yellow-900 bg-white"
                        @mouseenter="isDisplay = true">管理中心</span>
                    <div class="flex flex-col absolute right-0 top-full  w-18 bg-orange-100  text-gray-600 shadow-lg r z-10"
                        v-show="isDisplay" @mouseleave="isDisplay = false">
                        <a href="/dashboard" target="_blank"
                            class="border rounded border-orange-300 text-center hover:bg-orange-600 hover:text-white">已选款</a>
                        <a @click="logout" target="_blank"
                            class="border rounded border-orange-300 text-center hover:bg-orange-600 hover:text-white">退出</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>

<script setup>
import { ref,reactive} from 'vue'
import { useRouter } from 'vue-router'
import {useUserStore } from '@/stores/user'
const  router = useRouter()
const userStore = useUserStore()
const isDisplay = ref(false)

const logout = () => {
    userStore.isLogin = false
    router.push('/homePage')
}

</script >
<style lang="less" scoped>
</style>